<template>
	<section>
		<headers txt="账户设置"></headers>
		<ul class="mu20 ">
			<li class="bbtm md10 sz30 wallfff">
				<a href="javascript: void(0)" @click="sexs" class="flex_between p30 hue333">
					<span class="w25">性别</span>
					<p class="flex1">{{sexName}}</p>
					<i class="iconfont icon-advance"></i>
				</a>
			</li>
			<li class="bbtm md10 sz30 wallfff">
				<router-link to="/mycentreAll/nickname" class="flex_between p30 hue333">
					<span class="w25">昵称</span>
					<p class="flex1">{{infos.Members_NikeName||names}}</p>
					<i class="iconfont icon-advance"></i>
				</router-link>
			</li>
			<li class="bbtm md10 sz30 wallfff">
				<router-link to="/mycentreAll/phones" class="flex_between p30 hue333">
					<span class="w25">手机号码</span>
					<p class="flex1">{{infos.Members_Phone}}</p>
					<i class="iconfont icon-advance"></i>
				</router-link>
			</li>
		</ul>
		<mt-popup v-model="sex" position="bottom" closeOnClickModal="false" class="w100">

			<p class="p30 bbtm sz30 centre">
				<span>选择性别</span>
				<!--<span>关闭</span>-->
			</p>
			<section class="sex flex_between">
				<button type="button" :class="{sexC:sexA}" @click="sex0">男</button>
				<button type="button" :class="{sexC:sexB}" @click="sex0">女</button>
			</section>

		</mt-popup>
	</section>
</template>

<script>
	import { Popup } from 'mint-ui';
	import { Toast } from 'mint-ui';
	import { Indicator } from 'mint-ui';
	import Qs from 'qs';
	export default {
		data() {
			return {
				sex: false,
				sexName: "",
				sexA: false,
				sexB: false,
				infos: JSON.parse(sessionStorage.getItem("infos")),
				names:"没有设置昵称"
			}
		},
		created() {
			this.infos = JSON.parse(sessionStorage.getItem("infos"));
			this.sexName = this.infos.Members_Sex ? "女" : "男";
			
		},
		methods: {
			sexs: function() {
				this.sex = true;
				if(this.sexName == "男") {
					this.sexA = true;
					this.sexB = false;
				} else {
					this.sexA = false;
					this.sexB = true;
				}
			},
			sex0: function(e) {
				let v = this;
				if(e.target.innerText == "男") {
					v.sexA = true;
					v.sexB = false;
					v.sex_c("男", function() {
						v.sexName = "男";
						v.sex = false;
					})

				} else {
					v.sexA = false;
					v.sexB = true;

					v.sex_c("女", function() {
						v.sexName = "女";
						v.sex = false;
					})
				}

			},
			sex_c: function(sets, cals) { // 修改昵称请求
				let set = sets === "男" ? 0 : 1;
				Indicator.open({
					text: '请求中，请稍等'
				});
				this.$http.post("/WorkMembers/V1.0/MembersInfoEidt", Qs.stringify({
					"MembersID": this.$store.state.MembersID,
					"Mode": "Sex",
					"New_Contact": set

				})).then((res) => {
					Indicator.close();
					if(!res.data.Return_ID) {
						let session = JSON.parse(sessionStorage.infos);
						session.Members_Sex = set;
						sessionStorage.infos = JSON.stringify(session);
						cals();
					}
					Toast(res.data.Return_Mess);
					

				}).catch((err) => {
					Indicator.close();
					Toast(err);
				});
			}
		}
	}
</script>

<style scoped>
	.sex {
		padding: 0.8666666666rem 1.3333333333rem;
	}
	
	.sex>button {
		width: 3.3333333333rem;
		background: none;
		border: 1px solid #df4444;
		border-radius: 0.1333333333rem;
		font-size: 0.4rem;
		padding: 0.2666666666rem 0;
	}
	
	.sexC {
		background: #df4444 !important;
		color: #fff;
	}
</style>